<template>
  <div class="bg" :style="{'background-image': 'url('+require('@/assets/login/login_back.jpg')+')'}">
      <div class="container">
        <div class="logoDiv">
          <img :src="require('@/assets/login/logo.png')">
        </div>
        <div class="labels">
          <div >账号密码登录</div>
          <div >指静脉登录</div>
        </div>
        <form>
          <el-input v-model="user.userName" placeholder="请输入用户名" prefix-icon="el-icon-search"></el-input>
          <el-input show-password v-model="user.password" placeholder="请输入密码" prefix-icon="el-icon-key"></el-input>
          <div style="display: flex">
            <el-input style="flex:5;" v-model="user.randCode" placeholder="请输入验证码" prefix-icon="el-icon-picture-outline" @keyup.enter.native="login()"></el-input>
            <img id="verifyImg" style="flex:2;margin-left: 20px" src="/yczmq/randCode">
          </div>
          <el-button type="success" @click="login(1)" style="width: 100%">登录</el-button>
          <el-alert :closable=false
              :title="error"
              type="warning" v-show="error">
          </el-alert>
        </form>
      </div>
  </div>
</template>

<script>
  export default {
    name: "login.vue",
    data: function() {
      return {
        user: {},
        error:""
      }
    },
    methods:{
      reSetImg(){
        document.getElementById("verifyImg").setAttribute("src","/yczmq/randCode?_=" + new Date().getTime())
      },
      login(){
        this.error = "";
        this.$http.post("/yczmq/login",window.changeDataType(this.user)).then(resp=>{
          if (resp.status == 0) {
            window.sessionStorage.setItem("user",JSON.stringify(resp.data))
            this.$router.push("/welcome");
          } else {
            this.error = resp.message;
          }
        })
      }
    },
    mounted(){
      this.reSetImg();
    },
    created(){
      document.title = "中国(湖北)自由贸易试验区宜昌片区“六多合一”综合管理信息平台";
    }
  }
</script>

<style scoped>
  .bg{
    height: 100%;
    width: 100%;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container{
    background: rgba(255, 255, 255, 0.90);
    width: 465px;
    margin-top: -10%;
 /*   height: 460px;
    position:absolute ;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;*/
  }
  .logoDiv{
    text-align: center;
  }
  .logoDiv>img{
    margin-bottom: 8%;
    width: 80%;
    margin-top: 5%;
  }
  .labels{
    display: flex;
  }
  .labels>div{
    flex: 1;
    padding: 9px 0 11px;
    text-align: center;
    font-size: 17px;
    font-weight: bolder;
  }
  .labels>div:first-child{
    border-bottom: 2px solid #7ED321;
  }
  form{
    padding: 0 50px 20px;
  }
  form>*{
    margin-top: 20px;
  }

</style>